<template>
  <div class="qqFace" @click="choose($event)" v-show="showEmoji">
    <ul>
      <li>
        <img src="/public/face/1.gif" text="[em_1]"/>
      </li>
      <li>
        <img src="/public/face/2.gif" text="[em_2]"/>
      </li>
      <li>
        <img src="/public/face/3.gif" text="[em_3]"/>
      </li>
      <li>
        <img src="/public/face/4.gif" text="[em_4]"/>
      </li>
      <li>
        <img src="/public/face/5.gif" text="[em_5]"/>
      </li>
      <li>
        <img src="/public/face/6.gif" text="[em_6]"/>
      </li>
      <li>
        <img src="/public/face/7.gif" text="[em_7]"/>
      </li>
      <li>
        <img src="/public/face/8.gif" text="[em_8]"/>
      </li>
      <li>
        <img src="/public/face/9.gif" text="[em_9]"/>
      </li>
      <li>
        <img src="/public/face/10.gif" text="[em_10]"/>
      </li>
      <li>
        <img src="/public/face/11.gif" text="[em_11]"/>
      </li>
      <li>
        <img src="/public/face/12.gif" text="[em_12]"/>
      </li>
      <li>
        <img src="/public/face/13.gif" text="[em_13]"/>
      </li>
      <li>
        <img src="/public/face/14.gif" text="[em_14]"/>
      </li>
      <li>
        <img src="/public/face/15.gif" text="[em_15]"/>
      </li>
      <li>
        <img src="/public/face/16.gif" text="[em_16]"/>
      </li>
      <li>
        <img src="/public/face/17.gif" text="[em_17]"/>
      </li>
      <li>
        <img src="/public/face/18.gif" text="[em_18]"/>
      </li>
      <li>
        <img src="/public/face/19.gif" text="[em_19]"/>
      </li>
      <li>
        <img src="/public/face/20.gif" text="[em_20]"/>
      </li>
      <li>
        <img src="/public/face/21.gif" text="[em_21]"/>
      </li>
      <li>
        <img src="/public/face/22.gif" text="[em_22]"/>
      </li>
      <li>
        <img src="/public/face/23.gif" text="[em_23]"/>
      </li>
      <li>
        <img src="/public/face/24.gif" text="[em_24]"/>
      </li>
      <li>
        <img src="/public/face/25.gif" text="[em_25]"/>
      </li>
      <li>
        <img src="/public/face/26.gif" text="[em_26]"/>
      </li>
      <li>
        <img src="/public/face/27.gif" text="[em_27]"/>
      </li>
      <li>
        <img src="/public/face/28.gif" text="[em_28]"/>
      </li>
      <li>
        <img src="/public/face/29.gif" text="[em_29]"/>
      </li>
      <li>
        <img src="/public/face/30.gif" text="[em_30]"/>
      </li>
      <li>
        <img src="/public/face/31.gif" text="[em_31]"/>
      </li>
      <li>
        <img src="/public/face/32.gif" text="[em_32]"/>
      </li>
      <li>
        <img src="/public/face/33.gif" text="[em_33]"/>
      </li>
      <li>
        <img src="/public/face/34.gif" text="[em_34]"/>
      </li>
      <li>
        <img src="/public/face/35.gif" text="[em_35]"/>
      </li>
      <li>
        <img src="/public/face/36.gif" text="[em_36]"/>
      </li>
      <li>
        <img src="/public/face/37.gif" text="[em_37]"/>
      </li>
      <li>
        <img src="/public/face/38.gif" text="[em_38]"/>
      </li>
      <li>
        <img src="/public/face/39.gif" text="[em_39]"/>
      </li>
      <li>
        <img src="/public/face/40.gif" text="[em_40]"/>
      </li>
      <li>
        <img src="/public/face/41.gif" text="[em_41]"/>
      </li>
      <li>
        <img src="/public/face/42.gif" text="[em_42]"/>
      </li>
      <li>
        <img src="/public/face/43.gif" text="[em_43]"/>
      </li>
      <li>
        <img src="/public/face/44.gif" text="[em_44]"/>
      </li>
      <li>
        <img src="/public/face/45.gif" text="[em_45]"/>
      </li>
      <li>
        <img src="/public/face/46.gif" text="[em_46]"/>
      </li>
      <li>
        <img src="/public/face/47.gif" text="[em_47]"/>
      </li>
      <li>
        <img src="/public/face/48.gif" text="[em_48]"/>
      </li>
      <li>
        <img src="/public/face/49.gif" text="[em_49]"/>
      </li>
      <li>
        <img src="/public/face/50.gif" text="[em_50]"/>
      </li>
      <li>
        <img src="/public/face/51.gif" text="[em_51]"/>
      </li>
      <li>
        <img src="/public/face/52.gif" text="[em_52]"/>
      </li>
      <li>
        <img src="/public/face/53.gif" text="[em_53]"/>
      </li>
      <li>
        <img src="/public/face/54.gif" text="[em_54]"/>
      </li>
      <li>
        <img src="/public/face/55.gif" text="[em_55]"/>
      </li>
      <li>
        <img src="/public/face/56.gif" text="[em_56]"/>
      </li>
      <li>
        <img src="/public/face/57.gif" text="[em_57]"/>
      </li>
      <li>
        <img src="/public/face/58.gif" text="[em_58]"/>
      </li>
      <li>
        <img src="/public/face/59.gif" text="[em_59]"/>
      </li>
      <li>
        <img src="/public/face/60.gif" text="[em_60]"/>
      </li>
      <li>
        <img src="/public/face/61.gif" text="[em_61]"/>
      </li>
      <li>
        <img src="/public/face/62.gif" text="[em_62]"/>
      </li>
      <li>
        <img src="/public/face/63.gif" text="[em_63]"/>
      </li>
      <li>
        <img src="/public/face/64.gif" text="[em_64]"/>
      </li>
      <li>
        <img src="/public/face/65.gif" text="[em_65]"/>
      </li>
      <li>
        <img src="/public/face/66.gif" text="[em_66]"/>
      </li>
      <li>
        <img src="/public/face/67.gif" text="[em_67]"/>
      </li>
      <li>
        <img src="/public/face/68.gif" text="[em_68]"/>
      </li>
      <li>
        <img src="/public/face/69.gif" text="[em_69]"/>
      </li>
      <li>
        <img src="/public/face/70.gif" text="[em_70]"/>
      </li>
      <li>
        <img src="/public/face/71.gif" text="[em_71]"/>
      </li>
      <li>
        <img src="/public/face/72.gif" text="[em_72]"/>
      </li>
      <li>
        <img src="/public/face/73.gif" text="[em_73]"/>
      </li>
      <li>
        <img src="/public/face/74.gif" text="[em_74]"/>
      </li>
      <li>
        <img src="/public/face/75.gif" text="[em_75]"/>
      </li>
    </ul>
  </div>
</template>
<script>
import {reactive, toRefs, ref, onMounted} from 'vue'

export default {
  name: "Emoji",
  emits: ["setMsg", "update"],
  props: {
    showEmoji: {
      type: Boolean,
      // default: false,
      required: true
    }
  },
  setup(props, context) {
    const state = reactive({
      visible: false
    })
    console.log(context.attrs)


    const choose = (e) => {
      if (e.target.tagName.toLowerCase() === "img") {
        const text = e.target.getAttribute("text");
        context.emit("setMsg", text, 1);
      }
    }

    return {
      ...toRefs(state),
      choose,
    }
  }
}
</script>

<style scoped>
.qqFace {
  padding: 10px;
  box-sizing: border-box;
}
.qqFace ul {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.qqFace ul li {
  float: left;
  text-align: center;
  cursor: pointer;
  margin: 7px;
}

.icon-btn {
  vertical-align: middle;
}
</style>
